<template>
  <div>
    <van-search
      v-model.trim="searchValue"
      placeholder="请输入搜索关键词"
      show-action
      @search="onSearch"
    >
      <div
        slot="action"
        @click="onSearch"
      >搜索</div>
    </van-search>

    <div class="search_content">
      <p v-if="!productList.length">暂无数据</p>
      <van-card
        v-for="(v,i) in productList"
        :key="i"
        :price="v.price"
        :desc="v.proDesc"
        :title="v.proName"
        :thumb="`http://127.0.0.1:3000${v.pic[0].picAddr}`"
        :origin-price="v.oldPrice"
      >
        <div slot="footer">
          <van-button
            @click="$router.push({name:'mproduct',params:{
              id:v.id
          }})"
            size="small"
          >立即购买</van-button>
        </div>
      </van-card>
    </div>
  </div>
</template>

<script>
import { mobile } from '@/api'
export default {
  data () {
    return {
      searchValue: '',
      searchParams: {
        page: 1,
        size: 10
      },
      productList: []
    }
  },
  methods: {
    onSearch () {
      if (!this.searchValue) {
        this.productList = []
        return
      }
    //   console.log(this.searchValue)
      this.searchParams.proName = this.searchValue
      mobile.queryProduct(this.searchParams).then(res => {
        this.productList = res.data.data
        // console.log(this.productList)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.van-search {
  position: fixed;
  width: 100vw;
  z-index: 999;
}
.search_content {
  margin-top: 45px;
  p {
    text-align: center;
  }
}
</style>
